<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

     <!-- <div class="search-ctrl f-l"  style="display: none">
        <form style="height: 100%;">
          <input placeholder="搜索关键字" class="search-text">
          <button class="search-btn btn btn-info" type="button">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="addRoleModal">新增</button>
        <button type="button" class="btn btn-warning" @click="revampRoleModel">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteRole">删除</button>
        <button type="button" class="btn btn-success" @click="roleSetUserFn">角色关联用户</button>
        <button type="button" class="btn btn-success" @click="roleSetSectionFn">角色关联部门</button>
        <button type="button" class="btn btn-success" @click="roleSetDataFn">数据授权</button>
        <button type="button" class="btn btn-success" @click="roleSetFunction">角色功能授权</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr v-for="(trs,index) in tableRowHtml.data"
              @click="selectTr(trs,index)"
              :class="{active: index === activeIndex}"
          >
            <td v-for="tds in tableHeader">
              {{ [trs,tds.key] | roleStageCode }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
         v-show="tableRowHtml.elementsSum !== 0"
         v-if="tableRowHtml"
         :showItem="10"
         :pageSize="20"
         :allDataSum="tableRowHtml.elementsSum"
         :allpage="(Math.ceil(tableRowHtml.elementsSum/20))"
         @current-change="tablePageData"
      ></Pages>

      <!--新增角色-->
      <RoleAddModal
        :addRoleObj="addRoleObj"
        @closeRoleAdd="closeRoleAddFn"
      ></RoleAddModal>

      <!--修改角色-->
      <RevampRoleModal
        :roleId="roleId"
        :revampRoleObj="revampRoleObj"
        @closeRoleRevamp="closeRoleRevampFn"
      ></RevampRoleModal>

      <!--用户关联橘色-->
      <RoleSetUserModal
        :roleId="roleId"
        :roleSetUser="roleSetUser"
        @roleSetUserClose="roleSetUserCloseFn"
      ></RoleSetUserModal>

      <RoleSetSection
        :roleId="roleId"
        :roleSetSection="roleSetSection"
        @roleSetSectionClose="roleSetSectionCloseFn"
      ></RoleSetSection>

      <!--用户设置数据权限-->
      <RoleSetData
        :roleId="roleId"
        :roleSetData="roleSetData"
        @roleSetDataClose="roleSetDataCloseFn"
      ></RoleSetData>

      <!--角色功能授权-->
      <RoleFunctionModal
        :roleId="roleId"
        :roleSetFunctionObj="roleSetFunctionObj"
        @roleFunctionModalClose="roleFunctionModalCloseFn"
      ></RoleFunctionModal>

    </div>
  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"
  import RoleAddModal from "./RoleAddModal"
  import RevampRoleModal from "./RevampRoleModal"
  import RoleSetUserModal from "./RoleSetUser"
  import RoleSetSection from "./RoleSetSection"
  import RoleSetData from "./RoleSetData"
  import RoleFunctionModal from "./RoleFunctionModal"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
      name: "roleTable",
      data(){
        return{
          activeIndex:-1,
          tableHeader:[
            {"key":"name","value":"角色名称"},
            {"key":"privilegeCode","value":"排序"},
            {"key":"stageCode","value":"等级"},
            {"key":"remark","value":"备注名"}
          ],
          tableParams:{
            pageNum:1,
            pageSize:20,
            name:'',
            stageCode:'',
          },
          tableRowHtml:[],
          addRoleObj:{
            isShow:false
          },
          revampRoleObj:{
            isShow:false
          },
          roleSetUser:{
            isShow:false
          },
          roleSetSection:{
            isShow:false
          },
          roleSetData:{
            isShow:false
          },
          roleSetFunctionObj:{
            isShow:false
          },
          roleId:null,
          searchObj:{
            condition:[
              {"title":"角色名称","key":"name",'type':'text',"value":''},
              {"title":"等级","key":"stageCode",'type':'select',"value":'','data':[
                  {'key':'请选择等级','value':''},
                  {'key':'市局','value':'1'},
                  {'key':'分局','value':'2'},
                  {'key':'派出所/警务站','value':'3'},
                ]
              },
            ],
            htmlType:"searchDefaultPublic",
          },
        }
      },
      components:{
        Pages, //分页
        RoleAddModal, //新增角色
        RevampRoleModal, //修改角色
        RoleSetUserModal, //角色关联用户
        RoleSetData, //角色设置数据权限
        RoleFunctionModal, //角色功能授权
        SearchPublic,
        RoleSetSection
      },
      created(){
        //请求表格
        this.tableAjaxData();
      },
      methods:{
        tablePageData(page){ //翻页通知
          ////console.log(page);
          //请求表格
          this.roleId = null;
          this.activeIndex = -1;
          this.tableParams.pageNum = page;
          this.tableAjaxData();
        },
        //表加载
        tableAjaxData(){
          this.$axios.get(this.HOST+"/roles/",{
            params:this.tableParams
          })
            .then((data)=>{
              ////console.log(data);
              this.tableRowHtml = data.data;
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        //选择表格列
        selectTr(trObj,index){
          this.activeIndex = index;
          this.roleId = trObj.id;
          //console.log(trObj);
        },
        //修改角色
        revampRoleModel(){
          if( this.roleId ){
            this.revampRoleObj.isShow = true;
          }else {
            this.s_alert("请选择需要修改的角色！");
            // alert("请选择需要修改的角色！");
          }
        },
        //新增弹窗显示
        addRoleModal(){
          this.addRoleObj.isShow = true;
        },
        //新增关闭弹窗
        closeRoleAddFn(){
          this.addRoleObj.isShow = false;
          this.tableAjaxData();
        },
        //删除角色
        deleteRole(){
          if( this.roleId ){
            let msg = confirm("请问是否删除角色？");
            if(msg){
              this.$axios["delete"](this.HOST+"/roles/"+this.roleId)
                .then((data)=>{
                  //console.log(data);
                  if( data.data.success ){
                    this.s_alert("删除成功！");//splice
                    // alert("删除成功！");//splice
                    this.s_logwrite("基础信息管理-角色管理","删除角色");
                    //this.tableRowHtml.data.splice(this.activeIndex,1); //删除表列
                    this.roleId = null;//清除角色id缓存
                    this.activeIndex = -1;//清除选择缓存
                    this.tableAjaxData();//刷新表
                  }else{
                    this.s_alert("删除失败！" + data.data.errorMsg.split("[")[0] + "!");
                  }
                })
                .catch((err)=>{
                  //console.log(err);
                })
            }
          }else {
            this.s_alert("请选择需要删除的角色！");
            // alert("请选择需要删除的角色！");
          }
        },
        //角色授权用户
        roleSetUserFn(){
          if( this.roleId ){
            this.roleSetUser.isShow = true;
          }else{
            this.s_alert("请选择需要关联用户的角色！");
            // alert("请选择需要关联用户的角色！");
          }

        },
        roleSetSectionFn(){
          if( this.roleId ){
            this.roleSetSection.isShow = true;
          }else{
            this.s_alert("请选择需要关联用户的角色！");
            // alert("请选择需要关联用户的角色！");
          }
        },
        //关闭角色授权
        roleSetUserCloseFn(){
          this.roleSetUser.isShow = false;
        },
        //部门授权
        roleSetSectionCloseFn(){
          this.roleSetSection.isShow = false;
        },
        //角色数据授权
        roleSetDataFn(){
          if( this.roleId ){
            this.roleSetData.isShow = true;
          }else {
            this.s_alert("请选择角色！");
            // alert("请选择角色！");
          }
        },
        //角色数据授权关闭
        roleSetDataCloseFn(){
          this.roleSetData.isShow = false;
          this.roleId = null;
          this.activeIndex = -1;
        },
        //修改角色信息关闭
        closeRoleRevampFn(){
          this.revampRoleObj.isShow = false;
          this.roleId = null;
          this.activeIndex = -1;
          this.tableAjaxData();
        },
        //角色功能授权
        roleSetFunction(){
          if(this.roleId){
            this.roleSetFunctionObj.isShow = true;
          }else{
            this.s_alert("请选择角色！");
            // alert("请选择角色！");
          }
        },
        //搜索
        searchParamsFn(searchParams){
          //console.log(this.searchObj.condition);
          for( let i=0;i<this.searchObj.condition.length;i++ ){
            for( let paramsKey in this.tableParams ){
              if( this.searchObj.condition[i].key === paramsKey ){
                this.tableParams[paramsKey] = this.searchObj.condition[i].value
              }
            }
          }
          this.tableAjaxData();
        },
        roleFunctionModalCloseFn(){
          this.roleSetFunctionObj.isShow = false;
        }
      }
    }
</script>

<style scoped>

</style>
